{% extends 'base.html' %}
{% load static %}
{% block content %}

<style>
    body {
        background: linear-gradient(to right, #f8f9fa, #e9ecef);
    }

    .card {
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        border: none;
    }

    .table thead th {
        background-color: #f1f3f6;
        color: #343a40;
        font-weight: bold;
    }

    .table td, .table th {
        vertical-align: middle !important;
    }

    .badge-pill {
        padding: 0.4em 0.7em;
        font-size: 0.85rem;
        border-radius: 50rem;
    }

    .btn-sm i {
        margin-right: 5px;
    }

    .empty-state {
        padding: 3rem;
        text-align: center;
        color: #6c757d;
    }

    .empty-state i {
        font-size: 3rem;
        color: #adb5bd;
    }
</style>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10 col-xl-9">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h3 class="mb-0">🔐 加密历史记录</h3>
                </div>
                <div class="card-body">
                    {% if data_list %}
                        <div class="table-responsive">
                            <!-- encryption_history.html -->
<table class="table table-hover align-middle">
    <thead>
        <tr>
            <th>#</th>
            <th>用户名</th>
            <th>创建时间</th>
            <th>数据哈希</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {% for data in data_list %}
        <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ data.user.username }}</td>
            <td>{{ data.created_at|date:"Y-m-d H:i:s" }}</td>
            <td><code>{{ data.data_hash|truncatechars:32 }}</code></td>
            <td>
                <a href="{% url 'encryption_detail' data.id %}" class="btn btn-sm btn-outline-primary">
                    查看详情
                </a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

                        </div>
                    {% else %}
                        <div class="empty-state">
                            <i class="fas fa-lock-open mb-3"></i>
                            <h5 class="text-muted">暂无加密记录</h5>
                            <p class="text-muted">您可以前往文本加密页面开始加密您的第一条数据。</p>
                            <a href="{% url 'text_encrypt' %}" class="btn btn-primary mt-2">
                                <i class="fas fa-plus me-1"></i> 开始加密
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
